﻿@using ZR.CodeGenerator
@using ZR.Model.System.Generate
@using Infrastructure.Extensions;
@* @model ZR.CodeGenerator.Model.GenerateDto; *@
@{
    var genTable = Model.GenTable;
    var subTableOptions = Model.SubTableOptions;
    var options = Model.GenOptions;
    var replaceDto = Model.ReplaceDto;
    var dictHtml = new string[] { GenConstants.HTML_CHECKBOX, GenConstants.HTML_RADIO, GenConstants.HTML_SELECT, GenConstants.HTML_SELECT_MULTI };
    var dicts = new List<GenTableColumn>();
    dicts.AddRange(Model.GenTable.Columns.FindAll((Predicate<GenTableColumn>)(f => dictHtml.Contains(f.HtmlType))));
    if (Model.GenTable.SubTable != null && Model.GenTable.SubTableName.IsNotEmpty())
    {
        dicts.AddRange(Model.GenTable?.SubTable?.Columns?.FindAll((Predicate<GenTableColumn>)(f => dictHtml.Contains(f.HtmlType))));
    }
    var index = 0;
}
<template>
  <view class="edit-wrap">
    <view class="edit-form">
    <up-form labelPosition="left" :model="form" labelWidth="90px" :rules="rules" ref="uFormRef">
        
@foreach(var column in genTable.Columns)
{
    var columnName = column.CsharpFieldFl;
    var value = "item.value";
    var vModel = "v-model";
    var labelName = column.ColumnComment;
    if(column.CsharpType == "int" || column.CsharpType == "long")
    {
        value = "parseInt(item.value)";
        vModel = "v-model.number";
    }

    if(column.IsPk || column.IsIncrement)
    {
        if(column.IsPk && column.IsIncrement == false && replaceDto.UseSnowflakeId == false)
        {
      <up-form-item label="@(labelName)" prop="@(columnName)">
        <up-input type="number" v-model.number="form.@(columnName)" placeholder="请输入@(labelName)" :disabled="opertype != 1"></up-input>
      </up-form-item>
        }
        else
        {
      <up-form-item label="@(labelName)" prop="@(columnName)" v-if="opertype != 1">
        <up-input type="number" v-model.number="form.@(columnName)" placeholder="请输入@(labelName)" :disabled="true"/>
      </up-form-item>
        }
@:
    }
    else
    {
        if(column.HtmlType == "radio" || column.HtmlType == "selectRadio")
        {
        @:
      <up-form-item label="@(labelName)" prop="@(columnName)">
        <u-radio-group v-model="form.@(columnName)">
          <u-radio v-for="item in @(column.DictType != ""?$"options.{column.DictType}":$"{column.CsharpFieldFl}Options")" :name="@(value)" class="margin-right-xl" :label="item.label"></u-radio>
        </u-radio-group>
      </up-form-item>
        }
        else if(column.HtmlType == "checkbox")
        {
      <up-form-item label="@(labelName)" prop="@(columnName)">
      <view class="">
        <u-checkbox-group v-model="form.@(columnName)Checked">
          <u-checkbox :customStyle="{marginRight: '20px', marginBottom: '15px'}" v-for="(item, index) in @(column.DictType != ""?$"options.{column.DictType}":$"{column.CsharpFieldFl}Options")" :key="index"
            :label="item.label" :name="@(value)">
          </u-checkbox>
        </u-checkbox-group>
        </view>
      </up-form-item>
        }
        else if(column.HtmlType == "inputNumber" || column.HtmlType == "customInput")
        {
      <up-form-item label="@(labelName)" prop="@(columnName)">
        <u-number-box v-model="form.@(columnName)"></u-number-box>
      </up-form-item>
        }
        else if(column.HtmlType == "datetime" || column.HtmlType == "month")
        {
      <up-form-item label="@(labelName)" prop="@(columnName)">
        <uni-datetime-picker v-model="form.@(columnName)" />
      </up-form-item>
        }
        else if(column.HtmlType == "textarea")
        {
      <up-form-item label="@(labelName)" prop="@(columnName)">
        <u--textarea v-model="form.@(columnName)" placeholder="请输入内容" count ></u--textarea>
      </up-form-item>
@:
        }
        else if(column.HtmlType == "imageUpload" || column.HtmlType == "fileUpload")
        {
      <up-form-item label="@(labelName)" prop="@(columnName)">
        <uploadImage v-model="form.@(columnName)"></uploadImage>
      </up-form-item>
@:
        }
        else if(column.HtmlType == "select" || column.HtmlType == "selectMulti")
        {
        @:
      <up-form-item label="@(labelName)" prop="@(columnName)">
        <u-radio-group v-model="form.@(columnName)">
          <u-radio v-for="item in @(column.DictType != ""?$"options.{column.DictType}":$"{column.CsharpFieldFl}Options")" :name="@(value)" class="margin-right-xl" :label="item.label"></u-radio>
        </u-radio-group>
      </up-form-item>
        }
        else
        {
      <up-form-item label="@(labelName)" prop="@(columnName)">
        <up-input @(vModel)="form.@(columnName)" placeholder="请输入@(labelName)" @(column.DisabledStr)/>
      </up-form-item>
@:
        }
    }
}
      </up-form>
    </view>

    <view class="form-footer">
      <view class="btn_wrap">
        <view class="btn-item">
          <u-button text="取消" shape="circle" type="info" @@click="handleCancel"></u-button>
        </view>
        <view class="btn-item" v-if="props.opertype != 3">
          <u-button text="确定" shape="circle" type="primary" @@click="submit"></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    get@(genTable.BusinessName),
 
@if(replaceDto.ShowBtnAdd) 
{
    @:add@(genTable.BusinessName),
 @:
}
@if(replaceDto.ShowBtnEdit) 
{
    @:update@(genTable.BusinessName),
}
  } from '@@/api/@(CodeGeneratorTool.FirstLowerCase(genTable.ModuleName))/@(genTable.BusinessName.ToLower()).js'

  import {
    getCurrentInstance,
    reactive,
    ref,
    toRefs
  } from 'vue';
  const {
    proxy
  } = getCurrentInstance()

@{
    index = 0;
}
  var dictParams = [
@foreach(var item in dicts)
{
    if(item.DictType != "")
    {
  @:'@(item.DictType)',
    index = index + 1;
    }
}
  ]

@if(index > 0)
{
  @:proxy.getDicts(dictParams).then((response) => {
    @:response.data.forEach((element) => {
      @:state.options[element.dictType] = element.list
    @:})
  @:})
}
  const state = reactive({
    form: {
@foreach(var item in genTable.Columns)
{
    if(item.HtmlType == "checkbox")
    {
      @:@(item.CsharpFieldFl)Checked: [],
    }
    else
    {
      @:@item.CsharpFieldFl: undefined,
    }
}
      },
      rules: {
@foreach(var column in genTable.Columns)
{
    if(column.IsRequired && column.IsIncrement == false)
    {
          @:@(column.CsharpFieldFl): {
            @:required: true, 
            @:message: "@(column.ColumnComment)不能为空", 
            @:trigger: [ 'change', 'blur' ],
 @:@((column.CsharpType == "int" || column.CsharpType == "long")?"            type: \"number\"":"")
          @:},
    }
}
        },
    options: {
@foreach(var column in dicts)
{
    if(column.HtmlType == "radio" || column.HtmlType.Contains("select") || column.HtmlType == "checkbox")
    {
     @:// @(column.ColumnComment != ""?column.ColumnComment:column.CsharpFieldFl) 选项列表 格式 eg:{ label: '标签', value: '0'}
     @:@(column.DictType != ""?column.DictType:$"{column.CsharpFieldFl}Options"): [],
    }
}
    },
  })
  const { 
    form,    
    rules,
    options
  } = toRefs(state)
  const opertype = ref(0)
  // 表单引用  
  const uFormRef = ref(null)
  
  setTimeout(() => {
    proxy.$refs.uFormRef.setRules(state.rules)
  }, 300)

  function reset(){
      form.value = {
@foreach(var item in genTable.Columns)
{
    if((item.HtmlType == "checkbox"))
    {
        @:@(item.CsharpFieldFl)Checked: [],
    }
    else
    {
        @:@item.CsharpFieldFl: undefined,
    }
}
    }
  }

  function submit() {
    uFormRef.value.validate().then(res => {
@foreach(var item in genTable.Columns)
{
    if(item.HtmlType == "checkbox")
    {
      @:form.value.@(item.CsharpFieldFl) = form.value.@(item.CsharpFieldFl)Checked.toString();
    }
}
      if (form.value.@(replaceDto.FistLowerPk) != undefined && props.opertype == 2) {
        update@(genTable.BusinessName)(form.value).then((res) => {
          proxy.$modal.msgSuccess("修改成功")
          setTimeout(() => {
            handleCancel()
          }, 1000)
        })
      } else {
        add@(genTable.BusinessName)(form.value).then((res) => {
          proxy.$modal.msgSuccess("新增成功")
        })
      }
    }).catch(errors => {
      proxy.$modal.msg('表单校验失败')
    })
  }

  function handleCancel() {
    uni.redirectTo({
      url: './index'
    })
  }

  const props = defineProps({
    id: String,
    opertype: String,
  })
      
  if (props.id) {
    get@(genTable.BusinessName)(props.id).then(res => {
      const {
        code,
        data
      } = res
      if (code == 200) {
        form.value = {
          ...data,
@foreach(var item in genTable.Columns)
{
    if(item.HtmlType == "checkbox")
    {
          @:@(item.CsharpFieldFl)Checked: data.@(item.CsharpFieldFl) ? data.@(item.CsharpFieldFl).split(',') : [],
    }
}
        }
      }
    })
  } else {
    reset()
  }
</script>

<style lang="scss" scoped>
  @@import "@@/static/scss/page.scss";

  .btn-wrap {
    margin: 150rpx auto 0 auto;
    width: 80%
  }
</style>